<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Card - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>

<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Card - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content fullscreen="true">
        <ion-card>
          <ion-card-content>
            This is just your basic card with some text to boot. Like it? Keep scrolling...
          </ion-card-content>
        </ion-card>

        <ion-card>
          <ion-card-header>
            <ion-card-subtitle>
              Subtitle
            </ion-card-subtitle>
            <ion-card-title>
              Title
            </ion-card-title>
          </ion-card-header>

          <ion-card-content>
            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
          </ion-card-content>
        </ion-card>

        <ion-card>
          <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
            <img style="transform: rotate(145deg) scale(1.5)" src="http://images.all-free-download.com/images/graphiclarge/travel_icons_6813629.jpg">
          </div>
          <ion-card-header translucent>
            <ion-card-subtitle>
              Subtitle
            </ion-card-subtitle>
            <ion-card-title>
              Title
            </ion-card-title>
          </ion-card-header>

          <ion-card-content style="min-height: 200px">
          </ion-card-content>
        </ion-card>

        <ion-card style="color: white;">
          <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
            <img style="transform: scale(2)" src="https://images.unsplash.com/photo-1500531279542-fc8490c8ea4d?auto=format&fit=crop&w=1502&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
          </div>
          <ion-card-header translucent>
            <ion-card-subtitle>
              Subtitle
            </ion-card-subtitle>
            <ion-card-title>
              Title
            </ion-card-title>
          </ion-card-header>

          <ion-card-content style="padding-top: 100px">
            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
          </ion-card-content>
        </ion-card>

        <ion-card>
          <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
            <img src="https://images.unsplash.com/photo-1483354483454-4cd359948304?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
          </div>

          <ion-card-header>
            <ion-card-subtitle>
              Subtitle
            </ion-card-subtitle>
            <ion-card-title>
              Title
            </ion-card-title>
          </ion-card-header>

          <ion-card-content>
            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
          </ion-card-content>
        </ion-card>

        <ion-card>
          <ion-card-content>
            <ion-card-title>
              Card Title Goes Here
            </ion-card-title>
            <p>
              Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. I am within a paragraph element.
            </p>
          </ion-card-content>

          <ion-grid>
            <ion-row>
              <ion-col no-padding>
                <ion-button clear small>
                  <ion-icon slot="start" name="star"></ion-icon>
                  Star
                </ion-button>
              </ion-col>
              <ion-col no-padding text-right>
                <ion-button clear small class="activated">
                  <ion-icon slot="start" name="share"></ion-icon>
                  Activated
                </ion-button>
              </ion-col>
            </ion-row>
          </ion-grid>

        </ion-card>

        <ion-card class="cards-list-demo">
          <ion-card-header>
            Explore Nearby
          </ion-card-header>

          <ion-list>
            <ion-item>
              <ion-icon name='cart' item-start></ion-icon>
              Shopping
            </ion-item>

            <ion-item>
              <ion-icon name='medical' item-start></ion-icon>
              Hospital
            </ion-item>

            <ion-item>
              <ion-icon name='cafe' item-start></ion-icon>
              Cafe
            </ion-item>

            <ion-item>
              <ion-icon name='paw' item-start></ion-icon>
              Dog Park
            </ion-item>

            <ion-item>
              <ion-icon name='beer' item-start></ion-icon>
              Pub
            </ion-item>

            <ion-item>
              <ion-icon name='planet' item-start></ion-icon>
              Space
            </ion-item>

          </ion-list>
        </ion-card>

        <ion-card>

          <ion-item>
            <ion-avatar item-start>
              <img src="">
            </ion-avatar>
            <h2>Card With An Inset Picture</h2>
            <p>Isn't it beautiful</p>
          </ion-item>

          <div>
            <img src="">
          </div>

          <ion-card-content>
            <p>Hello. I am a paragraph.</p>
          </ion-card-content>

          <ion-grid>
            <ion-row>
              <ion-col no-padding>
                <ion-button clear small>
                  <ion-icon slot="start" name="star"></ion-icon>
                  Favorite
                </ion-button>
              </ion-col>
              <ion-col no-padding text-center>
                <ion-button clear small>
                  <ion-icon slot="start" name="musical-notes"></ion-icon>
                  Listen
                </ion-button>
              </ion-col>
              <ion-col no-padding align-self-center padding-right text-right>
                <ion-note>
                  11h ago
                </ion-note>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card>

        <ion-card no-margin>

          <div>
            <img src="">
          </div>

          <ion-card-content>
            ion-card[no-margin] This card was breaking the border radius.
          </ion-card-content>

          <ion-grid>
            <ion-row>
              <ion-col no-padding>
                <ion-button clear small dark>
                  <ion-icon slot="start" name="star"></ion-icon>
                  Favorite
                </ion-button>
              </ion-col>

              <ion-col no-padding text-center>
                <ion-button clear small dark>
                  <ion-icon slot="start" name="musical-notes"></ion-icon>
                  Listen
                </ion-button>
              </ion-col>
              <ion-col no-padding text-right>
                <ion-button clear small dark>
                  <ion-icon slot="start" name="share-alt"></ion-icon>
                  Share
                </ion-button>
              </ion-col>
            </ion-row>
          </ion-grid>

        </ion-card>
      </ion-content>

  </ion-app>
</body>

</html>
